<template>
	<scroll-view scroll-y="true" class="album_wrap" @scrolltolower="getmore">
		<!-- 轮播图 -->
		<view class="banner_wrap">
			<swiper :indicator-dots="true" :autoplay="true" :circular="true" indicator-active-color="#fff">
				<swiper-item v-for="(item,index) in banner" :key="item.id">
					<view class="swiper-item">
						<image :src="item.thumb" mode="widthFix"></image>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<!-- 轮播图 -->
		<!-- 专辑信息 -->
		<view class="album_info">
			<view class="album_box" v-for="(item,index) in album" :key="item.id" @click="navto(item.id)">

				<view class="album_image">
					<image :src="item.cover" mode="widthFix"></image>
				</view>
				<view class="album_body">
					<view class="album_title">
						<view class="album_name">
							{{item.name}}
						</view>
						<view class="album_desc">
							{{item.desc}}
						</view>
					</view>
					<view class="album_like">
						<text class="like">+关注</text>
					</view>
				</view>

			</view>
		</view>
		<!-- 专辑信息 -->
	</scroll-view>
</template>

<script>
	import request from '../../../JS/request.js'
	export default {
		data() {
			return {
				params: {
					limit: 20,
					hot: "new",
					skip: 0
				},
				album: [],
				banner: [],
				current: true
			}
		},
		methods: {
			async getList() {

				let getinfo = await request({
					url: 'http://service.picasso.adesk.com/v1/wallpaper/album',
					data: this.params
				})
				//获取轮播图、和专辑图片
				let {
					album,
					banner
				} = getinfo.data.res;
				if (album.length === 0) {
					this.current = false;
					return;
				}
				this.album = [...this.album, ...album];
				this.banner = banner;


			},
			getmore() {
				// 每次获取都跳过前面的
				if (this.current) {
					this.params.skip += this.params.limit
					this.getList();
				} else {
					wx.showToast({
						title: "没有新数据了",
						icon: "none"
					})
				}

			},
			
			navto(idcard){
				wx.navigateTo({
					url:`../album/index?id=${idcard}`
				})
					
				
			}

		},

		mounted() {
			wx.setNavigationBarTitle({
				title: "专辑"
			})

			this.getList();
		}
	}
</script>

<style lang="scss">
	.album_wrap {
		height: calc(100vh - 36px);
	}

	/*轮播图*/
	.banner_wrap {
		padding: 15rpx 0;
	}

	/*轮播图*/
	/*专辑信息*/
	.album_info {
		padding: 0 15rpx;

		.album_box {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 0;
			border-bottom: 3rpx solid #DADDDC;

			.album_image {
				flex: 3;

				image {
					width: 100%;
					height: 180rpx !important;
					border-radius: 5rpx;
					box-shadow: 0 0 10rpx $uni-color-success;
				}
			}

			.album_body {
				display: flex;
				flex-direction: column;
				flex: 6;
				padding-left: 30rpx;

				.album_title {

					.album_name {
						font-size: 30rpx;
						font-weight: bold;
						color: #000000;
					}

					.album_desc {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 25rpx;
						line-height: 30rpx;
						color: #000000;

					}
				}

				.album_like {
					position: relative;

					text {
						display: block;
						position: absolute;
						right: 0;
						top: 20rpx;
						font-size: 20rpx;
						border: 3rpx solid pink;
						padding: 5rpx 15rpx;
						border-radius: 5rpx;
					}
				}
			}




		}
	}

	/*专辑信息*/
</style>
